<!--  -->
<template>
    <div id="showpop">

        <!-- navBar -->
        <div class="nav bg-theme color-f text-l">
            <div style="display:flex;flex:2;">
                
                <!-- 返回按钮 -->
                <i class="iconfont icon-fanhui font19 pl08 iback" @click="gotoMobile()"></i>

                <!-- 标题 -->
                <span class="font19 ml16">
                    {{ pagename }}
                </span>
            </div>

            <!-- 起草 -->
            <span v-if='hasCreatIcon' style="margin-right:10px;margin-left:10px">
                <van-icon @click="todraw" name="add-o" size="25" />
            </span>

            <!-- 搜索 -->
            <span style="margin-right:10px;margin-left:10px">
                <van-icon @click="searchDialog()" name="search" size="25" />
            </span>
        </div>
        
        <div class="pageview">

            <!-- 动态组件 -->
            <component :is="tabviewName" ref="searchdata" style="height:calc(100vh-50px)"></component>
            
            <!-- 代办、已办(弹框) -->
            <van-popup v-model="showToDoDialog" position="top" style="padding:20px 0 20px 0" get-container="#showpop">
                
                <van-field input-align='left' label-width="4.5em" v-model="todoDialogTitle" label="标题名称:"
                    placeholder="请填写标题名称" />
                <van-field input-align='left' label-width="4.5em" v-model="todoDialogTitle" label="学习内容:"
                        placeholder="请填写学习内容" />

                <div style="display: flex;margin:20px 0 0 0">
                    <div style="width:50% ;text-align: center;">
                        <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px"
                            @click="chongzhibutton" type="default">
                            重置</van-button>
                    </div>

                    <div style="width:50%;text-align: center;">
                        <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px"
                            @click="cancelbutton" type="primary" color="#60a9ec">
                            查询</van-button>
                    </div>
                </div>
            </van-popup>

            <!-- 台账(弹框) -->
            <van-popup v-model="showTZDialog" position="top" style="padding:20px 0 20px 0" get-container="#showpop">
                <van-field readonly input-align='left' label-width="6.5em" clickable v-model="strtimeval" label="发布开始时间:"
                    palceholder="请选择开始时间" @click="showstrdialog = true" />
                <van-popup v-model="showstrdialog" position="bottom" get-container="#showpop">
                    <van-datetime-picker :formatter="formatter" type="date" v-model="nowDate" :min-date="strDate"
                        :max-date="maxDate" @cancel="showstrdialog = false" @confirm="showstrdialogcomfirm" />
                </van-popup>

                <van-field readonly input-align='left' label-width="6.5em" clickable v-model="endtimeval" label="发布结束时间:"
                    palceholder="请选择结束时间" @click="showenddialog = true" />

                <van-popup v-model="showenddialog" position="bottom" get-container="#showpop">
                    <van-datetime-picker :formatter="formatter" type="date" v-model="nowDate" :min-date="strDate"
                        :max-date="maxDate" @cancel="showenddialog = false" @confirm="showenddialogcomfirm" />
                </van-popup>

                <van-field input-align='left' label-width="6.5em" v-model="taizhangTitle" label="标题名称:"
                    placeholder="请填写标题名称" />

                <div style="display: flex;margin:20px 0 0 0">
                    <div style="width:50% ;text-align: center;">
                        <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px"
                            @click="chongzhibutton" type="default">
                            重置</van-button>
                    </div>

                    <div style="width:50%;text-align: center;">
                        <van-button style=" display: inline-block;margin:0 20px 0 20px;padding:0 36px 0 36px"
                            @click="cancelbutton" type="primary" color="#60a9ec">
                            查询</van-button>
                    </div>
                </div>

            </van-popup>

            <!-- Tabbar -->
            <van-tabbar v-model="active" @change="onchange">
                <van-tabbar-item>
                    <span>我的工作</span>
                    <template #icon="props">
                        <img :src="props.active ? icon1.active : icon1.inactive">
                    </template>
                </van-tabbar-item>

                <van-tabbar-item>
                    <span>党委第一议题台账</span>
                    <template #icon="props">
                        <img :src="props.active ? icon2.active : icon2.inactive">
                    </template>
                </van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>


<script type="text/javascript">
import tabview0 from '@/components/dwdyytTable0'
import tabview1 from '@/components/dwdyytTable1'
import { getToDoList, getDoneList } from '@/api/dwdyytAPI'
import { mapGetters } from 'vuex'
import { Notify } from 'vant'
import moment from 'moment'

export default {

    data() {
        return {

            pagename: '党委第一议题学习',
            tabviewName: '',
            active: 0,

            icon1: {
                active: require('@/assets/images/home_checked.png'),
                inactive: require('@/assets/images/home.png')
            },

            icon2: {
                active: require('@/assets/images/zcxj_selected.png'),
                inactive: require('@/assets/images/zcxj.png')
            },

            todoDialogTitle: '',
            showToDoDialog: false,
            showTZDialog: false, //
            nowDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            strDate: new Date(new Date().getFullYear() - 10, new Date().getMonth(), new Date().getDate()),
            maxDate: new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate()),
            showstrdialog: false,
            strtimeval: '',
            showenddialog: false,
            endtimeval: '',
            taizhangTitle: '',
            hasCreatIcon: false,
            hasCreat: false,
        }
    },

    computed: {
        ...mapGetters(['user']),
    },

    /// 生命周期--创建完成
    created() {
        
    },

    components: {
        tabview0,
        tabview1
    },

    /// 生命周期--挂载完成
    mounted() {

        if (window.history && window.history.pushState) {
            
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.gotoMobile, false);//false阻止默认事件
        }

        var hasTabbarNumber = (localStorage.getItem('dwdyytTabbarNumber') != '' &&
            localStorage.getItem('dwdyytTabbarNumber'));
        this.active = localStorage.getItem('dwdyytTabbarNumber')

        if (hasTabbarNumber && this.active == 1) {

            localStorage.setItem('dwdyytTabbarNumber', 1)
            this.tabviewName = 'tabview1'
            this.pagename = '党委第一议题学习台账'
            this.active = 1;

            if (this.hasCreat) {
                this.hasCreatIcon = false
            }
        }
        else
        {
            localStorage.setItem('dwdyytTabbarNumber', 0)
            this.tabviewName = 'tabview0'
            this.pagename = '党委第一议题学习'
            this.active = 0;
            this.hasCreatIcon = false
        }
    },

    //方法调用
    methods: {



        searchDialog() {
            if (this.active == 0) {
                this.showToDoDialog = true;
            } else if (this.active == 1) {
                this.showTZDialog = true;
            }
        },

        /// 重置
        chongzhibutton() {
            if (this.active == 0) {
                this.showToDoDialog = false;
                this.todoDialogTitle = '';
                this.$refs.searchdata.setsearchdata(this.todoDialogTitle)
            } 
            else if (this.active == 1) {
                this.showTZDialog = false;
                this.strtimeval = '';
                this.endtimeval = '';
                this.taizhangTitle = '';
                this.$refs.searchdata.setsearchdata(this.strtimeval, this.endtimeval
                    , this.taizhangTitle);
            }
        },

        /// 查询
        cancelbutton() {
            if (this.active == 0) {
                this.showToDoDialog = false;
                this.$refs.searchdata.setsearchdata(this.todoDialogTitle)
            } 
            else if (this.active == 1) {
                this.showTZDialog = false;
                this.$refs.searchdata.setsearchdata(this.strtimeval, this.endtimeval
                    , this.taizhangTitle);
            }
        },

        formatter(type, val) {
            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            } else if (type === 'day') {
                return `${val}日`;
            } else if (type === 'hour') {
                return `${val}时`;
            } else if (type === 'minute') {
                return `${val}分`;
            }
            return val;
        },

        showstrdialogcomfirm(value) {
            this.showstrdialog = false;
            this.strtimeval = moment(value).format('YYYY-MM-DD')
        },

        showenddialogcomfirm(value) {
            this.showenddialog = false;
            this.endtimeval = moment(value).format('YYYY-MM-DD')
        },

        onchange(index) {
            if (index == 0) {
                localStorage.setItem('dwdyytTabbarNumber', 0)
                this.tabviewName = 'tabview0'
                this.pagename = '党委第一议题学习'
                this.active = 0
                this.hasCreatIcon = false
            } 
            else if (index = 1) {
                localStorage.setItem('dwdyytTabbarNumber', 1)
                this.tabviewName = 'tabview1'
                this.pagename = '党委第一议题学习台账'
                this.active = 1
                if (this.hasCreat) {
                    this.hasCreatIcon = true
                }
            }
        },

        gotoMobile() {

            this.addlistener();
            if (this.active == 0 && this.showToDoDialog) {
                this.showToDoDialog = false;
            } 
            else if (this.active == 1 && this.showTZDialog) {

                if (this.showstrdialog) {
                    this.showstrdialog = false;
                    return;
                }

                if (this.showenddialog) {
                    this.showenddialog = false;
                    return;
                }

                this.showTZDialog = false;
            } 
            else 
            {
                localStorage.setItem('dwdyytTabbarNumber', 0)
                localStorage.setItem('tabactiveNumber', '')
                this.$router.push(
                    {
                        name: 'mainview',
                        query: {
                        }
                    }
                )
            }
        },

        /// 注册 返回键
        addlistener() {
            if (window.history && window.history.pushState) {
                console.log('再次注册物理返回键监听');
                history.pushState(null, null, document.URL);
                window.addEventListener('popstate', this.gotoMobile, false);//false阻止默认事件
            }
        },

        
    },

    destroyed() {
        window.removeEventListener('popstate', this.gotoMobile, false);//false阻止默认事件
    },
}

</script>



<style scoped>

/* @import url();*/
.item {
    text-align: center;
    width: 20%
}

.pageview {
    height: 100%;
    padding-top: 50px;
    margin-bottom: 60px;
    font-size: 12px;
}

.tabview {
    position: fixed;
    bottom: 0;
    width: 100%;
    line-height: var(--footer-height);
    background-color: gray;
    padding-top: 20px;
    padding-bottom: 20px;
}

.vh100 {
    width: 100%;
}

.pf-20 {
    padding-right: 20px;
}

</style>